<template>
	<view class="container">
		<view class="wid90 mar foSi30">
			<view class="wid100 dis disAl disJuB hei80">
				<view>头像</view>
				<image class="avatar2" :src="avatarUrl ? avatarUrl : defaultAvatarUrl2" @click.stop="chooseImg()">
				</image>
			</view>
			<view class="wid100 dis disAl disJuB hei80">
				<view>姓名</view>
				<input v-model="userinfo.realname" type="nickname" style="text-align: right;" placeholder="请输入姓名"
					placeholder-style="font-size:14px;" />
			</view>
			<view class="wid100 dis disAl disJuB hei80">
				<view>性别</view>
				<radio-group class="dis disAl" @change="radiohage">
					<label class="mar-right20">
						<radio style="transform:scale(0.7)" value="1" :checked="userinfo.gender === 1" />男
					</label>
					<label>
						<radio value="2" style="transform:scale(0.7)" :checked="userinfo.gender === 2" />女
					</label>
				</radio-group>
			</view>
			<view class="wid100 dis disAl disJuB hei80">
				<view>生日</view>
				<picker mode="date" :value="userinfo.birthday_time" @change="bindDateChange">
					<view :style="userinfo.birthday_time?'':'color: grey;'">
						{{userinfo.birthday_time ? userinfo.birthday_time:'请选择生日'}}
					</view>
				</picker>
			</view>
			<view class="wid100 dis disAl disJuB hei80">
				<view>籍贯</view>
				<picker mode="multiSelector" @change="okReginon" @columnchange="bindMultiPickerColumnChange"
					:value="regionIndex" :range="region">
					<view v-if="userinfo.province" class="inp">{{userinfo.province}} {{userinfo.city}} {{userinfo.area}}
					</view>
					<view v-else style="color: #808080;">请选择地址</view>
				</picker>
			</view>
			<view class="wid100 dis disAl disJuB hei80">
				<view>所在地区</view>
				<picker mode="multiSelector" @change="okReginon1"
					@columnchange="bindMultiPickerColumnChange1" range-key="name"
					:value="cityAreaIndex" :range="cityArea">
					<view v-if="userinfo.pt_city_id" class="inp">{{pt_city_name}} {{pt_area_name}}
					</view>
					<view v-else style="color: #808080;">请选择地址</view>
				</picker>
			</view>
			<view class="wid100 dis disAl disJuB hei80">
				<view>联系电话</view>
				<input v-model="userinfo.tel" type="tel" style="text-align: right;" name="tel" placeholder="请输入联系电话"
					placeholder-style="font-size:14px;" />
			</view>
			<view class="wid100 dis disAl disJuB hei80">
				<view>学历</view>
				<picker @change="educationaChange" :value="userinfo.educationa" :range="educationaList">
					<view :style="educationaIndex?'':'color: grey;'">
						{{userinfo.educationa ? userinfo.educationa:'请选择学历'}}
					</view>
				</picker>
			</view>
			<view class="wid100 dis disAl disJuB hei80">
				<view>毕业院校</view>
				<input v-model="userinfo.alma_mater" type="text" style="text-align: right;" name="alma_mater"
					placeholder="请输入毕业院校" placeholder-style="font-size:14px;" />
			</view>
			<view class="wid100 dis disAl disJuB hei80">
				<view>专业</view>
				<input v-model="userinfo.major" type="text" style="text-align: right;" placeholder="请输入专业"
					placeholder-style="font-size:14px;" />
			</view>
			<view class="wid100 dis disAl disJuB hei80">
				<view>毕业时间</view>
				<picker mode="date" :value="userinfo.graduation_time" @change="bindDateChange1">
					<view :style="userinfo.graduation_time?'':'color: grey;'">
						{{userinfo.graduation_time ? userinfo.graduation_time:'请选择毕业时间'}}
					</view>
				</picker>
			</view>
			<view class="wid100 dis disAl disJuB hei80">
				<view>证书名称</view>
				<input v-model="userinfo.certificate" type="text" style="text-align: right;" placeholder="请输入证书名称"
					placeholder-style="font-size:14px;" />
			</view>
			<view class="wid100 dis disAl disJuB hei80">
				<view>求职意向</view>
				<input v-model="userinfo.job_intention" type="text" style="text-align: right;" placeholder="请输入求职意向"
					placeholder-style="font-size:14px;" />
			</view>
			<view class="wid100 dis disAl disJuB hei80">
				<view>验证码</view>
				<input v-model="code" type="text" style="text-align: right;margin-right:10rpx" placeholder="短信验证码" placeholder-style="font-size:14px;" />
				<view class="codes_btn" @click="sendcode">{{code_tips}}</view>
			</view>
			<!-- <view class="wid100 dis disAl disJuB">
				<view>职称证书</view>
				<view style="width: 200rpx;height: 200rpx;" @click.stop="chooseImg(2)">
					<view v-if="!userinfo.certificate" class="wh100 dis disAl disJuC foSi30"
						style="border: 2rpx dashed #D2D2D2;color: #D2D2D2;">上传图片</view>
					<image v-if="userinfo.certificate" :src="weburl+userinfo.certificate" class="wh100"></image>
				</view>
			</view> -->
		</view>
		<view class="button"><button @click.stop="tijiao">提交登录</button></view>
	</view>
</template>

<script>
	const defaultAvatarUrl2 = '/static/imgs/icon/qpic.png';
	import provinceData from '../../static/region.json';
	import {
		User
	} from '../../model/user-model.js';
	var user = new User();
	import {
		Company
	} from '../../model/company-model.js';
	var company = new Company();
	import {
		My
	} from '../my/my-model.js';
	var my = new My();
	import {
		Token
	} from '../../utils/token.js';
	var token = new Token();
	import {
		Config
	} from '../../utils/config.js';
	export default {
		data() {
			return {
				codes:'11',
				code:'',
				code_tips:'发送',
				time:60,
				weburl: Config.restUrl,
				educationaList: ["小学", "初中", "大专", "本科", "研究生"],
				educationaIndex: null,
				avatarUrl: defaultAvatarUrl2,
				avatarUrlimg: '',
				userinfo: {
					realname: '',
					tel: '',
					gender: 1,
					birthday_time: '',
					educationa: '',
					alma_mater: '',
					major: '',
					graduation_time: '',
					certificate: '',
					job_intention: '',
					province: '',
					city: '',
					area: ''
				},
				defaultAvatarUrl2: '',
				// 省市区选择器
				region: [
					[],
					[],
					[],
				],
				regionIndex: [0, 0, 0],
				// 市区联动 - 后台获取数据
				cityList: [],
				cityArea: [[],[]],
				cityAreaIndex: [0, 0],
				pt_city_name: '',
				pt_area_name: '',
				disabledCode:true,
				timer:'',
			};
		},
		onShow: function() {
			var that = this;
			// token.getTokenPhoneNumFromServer((data) => {});
		},
		onLoad: function() {
			var that = this;
			uni.setNavigationBarTitle({
				title: '完善资料'
			});
			provinceData.forEach(item => {
				this.region[0] = [...this.region[0], item.name]
			})
			provinceData[0].children.forEach(item => {
				this.region[1] = [...this.region[1], item.name]
			})
			provinceData[0].children[0].children.forEach(item => {
				this.region[2] = [...this.region[2], item.name]
			})
			that.getUser()
		},
		methods: {
			sendcode(){
				var that = this
				if(this.disabledCode){
					if (!/^1[23456789]\d{9}$/.test(that.userinfo.tel)) {
						return uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						})
					}
					var params = {
						phone:that.userinfo.tel
					}
					user.sendcode((data) => {
						console.log(data)
						if (data.code == 0) {
							that.disabledCode = false;
							that.timer = setInterval(that.fun, 1000);
							that.codes = data.data
						}else{
							uni.showToast({
								title:data.msg
							})
						}
					}, params);
					
				}
				
			},
			fun() {
				var self = this
				self.time--;
				if (self.time >= 0) {
					self.code_tips = self.time + "秒";
				} else if (self.time < 0) {
					self.code_tips = "发送";
					self.disabledCode = true;
					clearInterval(self.timer);
					self.time = 60;
				}
			},
			
			getUser(){
				var that = this;
				var params = {};
				my.UserInit((data) => {
					console.log(data)
					if (data.code !== -1) {
						that.avatarUrlimg = data.userinfo.avatarUrl;
						that.setData({
							userinfo: data.userinfo,
							avatarUrl: data.userinfo.avatarUrl,
							defaultAvatarUrl2: defaultAvatarUrl2
						});
						that.getcityarea()
						if (data.userinfo.province) {
							provinceData.forEach((item, index) => {
								if (item.name === data.userinfo.province) {
									provinceData[index].children.forEach((item1, index1) => {
										that.region[1] = [...that.region[1], item1.name]
										if (item1.name === data.userinfo.city) {
											provinceData[index].children[index1].children.forEach((
												item2, index2) => {
												that.region[2] = [...that.region[2], item2.name]
												if (item2.name === data.userinfo.area) {
													that.regionIndex = [index, index1, index2]
												}
											})
										}
									})
								}
							})
							that.$forceUpdate()
						}
						uni.hideNavigationBarLoading(); //完成停止加载
						uni.stopPullDownRefresh();
					}
				}, params);
			},
			getcityarea(){
				var that = this;
				var params = {};
				user.getcityarea((data) => {
					if (data.code === 1) {
						that.cityList = data.data
						var city = 0
						that.cityList.forEach((item, index) => {
							that.cityArea[0] = [...that.cityArea[0], {
								name: item.name, id: item.id
							}]
							if(that.userinfo.pt_city_id && that.userinfo.pt_city_id === item.id){
								that.pt_city_name = item.name
								city = index
							}
						})
						that.cityList[city].child.forEach((item, index) => {
							that.cityArea[1] = [...that.cityArea[1], {
								name: item.name, id: item.id
							}]
							if(that.userinfo.pt_area_id && that.userinfo.pt_area_id === item.id){
								that.pt_area_name = item.name
								that.cityAreaIndex = [city, index]
							}
						})
						that.$forceUpdate()
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none',
							duration: 2000
						})
					}
					uni.stopPullDownRefresh();
				}, params)
			},
			okReginon1(e) {
				this.cityAreaIndex = e.detail.value
				this.userinfo.pt_city_id = this.cityArea[0][this.cityAreaIndex[0]].id
				this.userinfo.pt_area_id = this.cityArea[1].length > 0?this.cityArea[1][this.cityAreaIndex[1]].id:''
				this.pt_city_name = this.cityArea[0][this.cityAreaIndex[0]].name
				this.pt_area_name = this.cityArea[1].length > 0?this.cityArea[1][this.cityAreaIndex[1]].name:''
			},
			bindMultiPickerColumnChange1: function(e) {
				// 省
				if (e.detail.column == 0) {
					this.cityAreaIndex[0] = e.detail.value
					this.cityAreaIndex[1] = 0
					this.cityArea[1] = []
					this.cityList[this.cityAreaIndex[0]].child.forEach((item, index) => {
						this.cityArea[1] = [...this.cityArea[1], {
							name: item.name, id: item.id
						}]
					})
				}else {
					this.cityAreaIndex[1] = e.detail.value
				}
				this.$forceUpdate()
			},
			
			okReginon(e) {
				console.log(e.detail.value)
				this.regionIndex = e.detail.value
				this.userinfo.province = this.region[0][this.regionIndex[0]]
				this.userinfo.city = this.region[1][this.regionIndex[1]]
				this.userinfo.area = this.region[2][this.regionIndex[2]]
			},
			bindMultiPickerColumnChange: function(e) {
				console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
				console.log(this.region[e.detail.column][e.detail.value])
				// 省
				if (e.detail.column == 0) {
					this.regionIndex[0] = e.detail.value
					this.regionIndex[1] = 0
					this.regionIndex[2] = 0
					this.region[1] = []
					this.region[2] = []
					provinceData[e.detail.value].children.forEach(item => {
						this.region[1] = [...this.region[1], item.name]
					})
					provinceData[this.regionIndex[0]].children[0].children.forEach(item => {
						this.region[2] = [...this.region[2], item.name]
					})
				}
				// 市
				else if (e.detail.column == 1) {
					console.log(this.regionIndex[0])
					this.regionIndex[1] = e.detail.value
					this.regionIndex[2] = 0
					this.region[2] = []
					provinceData[this.regionIndex[0]].children[e.detail.value].children.forEach(item => {
						this.region[2] = [...this.region[2], item.name]
					})
				} else {
					this.regionIndex[2] = e.detail.value
				}
				this.$forceUpdate()
			},
			chooseImg() {
				var that = this;
				uni.chooseImage({
					count: 1,
					// 默认9
					sizeType: ['compressed'],
					// 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					// 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						console.log(res)
						var tempFilePaths = res.tempFilePaths;
						that.uploadimg(res.tempFilePaths[0])
					},
					fail: function(res) {},
					complete: function(res) {}
				});
			},

			uploadimg(tempFilePaths, index) {
				uni.showToast({
					icon: 'loading',
					title: '正在上传'
				});
				var that = this;
				var params = {
					path: tempFilePaths,
				};
				console.log(params)
				company.uploadimg((data) => {
					console.log(1111, data);
					that.avatarUrl = that.weburl + data.imgpath
				}, params);
			},
			educationaChange(e) {
				this.educationaIndex = e.detail.value
				this.userinfo.educationa = this.educationaList[e.detail.value]
			},
			radiohage(e) {
				this.userinfo.gender = e.detail.value
			},
			bindDateChange: function(e) {
				this.userinfo.birthday_time = e.detail.value
			},
			bindDateChange1: function(e) {
				this.userinfo.graduation_time = e.detail.value
			},
			tijiao() {
				var that = this
				if(that.code != that.codes){
					return uni.showToast({
						title: '验证码错误',
						icon: 'none'
					})
				}
				if (!/^1[3456789]\d{9}$/.test(that.userinfo.tel)) {
					return uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
				}
				if (!that.userinfo.realname) {
					return uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
				}
				if (!that.userinfo.educationa) {
					return uni.showToast({
						title: '请输入学历',
						icon: 'none'
					})
				}
				if (!that.userinfo.alma_mater) {
					return uni.showToast({
						title: '请输入毕业院校',
						icon: 'none'
					})
				}
				if (!that.userinfo.major) {
					return uni.showToast({
						title: '请输入专业',
						icon: 'none'
					})
				}
				if (!that.userinfo.graduation_time) {
					return uni.showToast({
						title: '请输入毕业时间',
						icon: 'none'
					})
				}
				if (!that.userinfo.birthday_time) {
					return uni.showToast({
						title: '请输入生日',
						icon: 'none'
					})
				}
				if (!that.userinfo.province) {
					return uni.showToast({
						title: '请选择籍贯',
						icon: 'none'
					})
				}
				if (!that.userinfo.pt_city_id) {
					return uni.showToast({
						title: '请选择所在地区',
						icon: 'none'
					})
				}
				if (!that.avatarUrl) {
					return uni.showToast({
						title: '请上传头像',
						icon: 'none'
					})
				}
				
				var params = {
					realname: that.userinfo.realname,
					gender: that.userinfo.gender,
					educationa: that.userinfo.educationa,
					alma_mater: that.userinfo.alma_mater,
					major: that.userinfo.major,
					graduation_time: that.userinfo.graduation_time,
					certificate: that.userinfo.certificate,
					birthday_time: that.userinfo.birthday_time,
					tel: that.userinfo.tel,
					avatarUrl: that.avatarUrl,
					job_intention: that.userinfo.job_intention,
					province: that.userinfo.province,
					city: that.userinfo.city,
					area: that.userinfo.area,
					pt_city_id: that.userinfo.pt_city_id,
					pt_area_id: that.userinfo.pt_area_id
				};
				user.upUserinfo((data) => {
					console.log(data)
					if (data.code === 0) {
						uni.redirectTo({
							url: '/pages/user/index'
						})
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none',
							duration: 2000
						})
					}
					uni.stopPullDownRefresh();
				}, params)
			}
		}
	};
</script>
<style>
	.container {
		background-color: #fff;
		min-height: 100%;
		display: flex;
		flex-direction: column;
	}

	.avatar2 {
		display: block;
		width: 75rpx;
		height: 75rpx;
	}

	.button {
		margin-top: 60rpx;
	}
	.codes_btn{
		border: 1px solid #8f8f8f;
		padding: 8rpx 15rpx;
		border-radius: 10rpx;
		
	}

	.button button {
		background: #07b56d;
		border-radius: 15rpx;
		color: #fff;
		font-size: 14px;
		height: 80rpx;
		line-height: 80rpx;
		width: 300rpx;
	}
</style>